<template>
    <div>
        <div class="search-bar">
            <van-row>
            <van-col span="3" style="height:2.2rem">
                <img :src="locationIcon" alt="位置" width="100%" class="location-icon">
            </van-col>
            <van-col span="16">
                <input type="text" class="search-input">
            </van-col>
            <van-col span="5">
                <van-button size='mini'>查找</van-button>
            </van-col>
        </van-row>
        </div>
        <div class="swiper-area">
            <van-swipe :autoplay="3000">
                <van-swipe-item v-for="(img,index) in bannerPicArray" :key="index">
                    <img v-lazy="img.image" width="100%"/>
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="type-bar">
           <div class="type-item" v-for="(cate,index) in category" :key="index">
               <img v-lazy="cate.image" width="50rem">
               <span>{{cate.mallCategoryName}}</span>
           </div>
        </div>
        <div class="ad-banner">
            <img v-lazy="advertesPicture.PICTURE_ADDRESS" width="100%">
        </div>
        <div class="recommend-area">
            <div class="recommend-title">商品推荐</div>
            <div class="recommend-body">
              <swiper :options="swiperOption">
                  <swiper-slide v-for="(goods,index) in recommendGoods" :key="index">
                      <div class="recommend-item">
                          <img v-lazy="goods.image" width="80%"/>
                          <div class="recommend-text">{{goods.goodsName}}</div>
                          <div class="textMoney">￥{{goods.price | moneyFilter}}(￥{{goods.mallPrice | moneyFilter}})</div>
                      </div>
                  </swiper-slide>
              </swiper>
            </div>
        </div>
        <floorComponent :floorData="floor1" :floorTitle="floorName.floor1"></floorComponent>
        <floorComponent :floorData="floor2" :floorTitle="floorName.floor2"></floorComponent>
        <floorComponent :floorData="floor3" :floorTitle="floorName.floor3"></floorComponent>
        <div class="hot-area">
            <div class="hot-title">热卖商品</div>
            <div class="hot-goods">
              <van-list>
                  <van-row gutter="20">
                      <van-col span="12" v-for="(item,index) in hotGoods" :key="index">
                         <goods-info :goodsId="item.goodsId" :goodsImage = "item.image" :goodsName= "item.name" :goodsPrice = "item.price" :goodsMallPrice = "item.mallPrice" ></goods-info>
                      </van-col>
                  </van-row>
              </van-list>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import floorComponent from '../component/floorComponent'
import goodsInfo from '../component/goodsInfoComponent'
import {toMoney} from '@/filter/moneyFilter.js';
import url from '@/serviceAPI.config.js';
export default {
  data() {
    return {
      locationIcon: require("../../assets/images/location.png"),
      category: [],
      advertesPicture:{},
      bannerPicArray: [],
      recommendGoods:[],
      hotGoods:[],
      swiperOption:{
          slidesPerView:3
      },
      floor1:[],
      floor2:[],
      floor3:[],
      floorName:[],
    };
  },
  created() {
    axios({
      url:
        url.getShoppingMallInfo,
        method: "get"
    })
      .then(response => {
        if (response.status == 200) {
          this.category = response.data.data.category;
          this.advertesPicture = response.data.data.advertesPicture;
          this.bannerPicArray = response.data.data.slides;
          this.recommendGoods = response.data.data.recommend;
          this.floor1 = response.data.data.floor1;
          this.floor2 = response.data.data.floor1;
          this.floor3 = response.data.data.floor1;
          this.floorName = response.data.data.floorName;
          this.hotGoods = response.data.data.hotGoods;
        }
        console.log(response);
      })
      .catch(error => {});
  },
  components:{
      swiper,
      swiperSlide,
      floorComponent,
      goodsInfo
  },
  filters:{
      moneyFilter(money){
         return toMoney(money);
      }
  }
};
</script>

<style scoped>
.search-bar {
  height: 2.2rem;
  line-height: 2.2rem;
  background: #e58a01;
  text-align: center;
}
.search-input {
  width: 100%;
  height: 1.3rem;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 1px solid #ffffff !important ;
  background-color: #e58a01;
  color: #fff;
}
.swiper-area {
  width: 20rem;
  clear: both;
}
.type-bar {
  background-color: #fff;
  margin: 0 0.3rem 0.3rem 0.3rem;
  border-radius: 0.3rem;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.type-bar div {
  padding: 0.3rem;
  font-size: 12px;
  text-align: center;
}
.recommend-area{
       background-color: #fff;
       margin-top: .3rem;
  }
  .recommend-title{
      border-bottom:1px solid #eee;
      font-size:14px;
      padding:.2rem;
      color:#e5017d;
  }
  .recommend-body{
       border-bottom: 1px solid #eee;
   }
  .recommend-item{
      width:99%;
      border-right: 1px solid #eee;
      font-size: 12px;
      text-align: center;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
  }
  .recommend-text{
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
  .textMoney{
      color: #ff0000
  }
  .hot-area{
      text-align: center;
      font-size:14px;
      height: 1.8rem;
      line-height:1.8rem;
  }
  .type-item{
      flex:1;
  }
  .hot-goods{
        height: 130rem;
        overflow: hidden;
        background-color: #fff;
    }
</style>